<template>
  <div class="static-bottom" :class="{opacity: show}" @click="toTop">
    <img src="../../assets/hj.svg">
  </div>
</template>
<script>
  export default {
    name: 'TheStaticBottom',
    data() {
      return {
        show: false,
        animateShow: false
      }
    },
    mounted () {
      window.addEventListener('scroll', this.handleScroll)
    },
    created() {
      // this.show = true
    },
    methods: {
      toTop() {
        this.scrollTop(0, 500)
      },
      handleScroll () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        if (scrollTop <= 100) this.show = false
        else this.show = true
      },
      scrollTop (number = 0, time) {
        if (!time) {
            document.body.scrollTop = document.documentElement.scrollTop = number;
            return number;
        }
        const spacingTime = 20; // 设置循环的间隔时间  值越小消耗性能越高
        let spacingInex = time / spacingTime; // 计算循环的次数
        let nowTop = document.body.scrollTop + document.documentElement.scrollTop; // 获取当前滚动条位置
        let everTop = (number - nowTop) / spacingInex; // 计算每次滑动的距离
        let scrollTimer = setInterval(() => {
            if (spacingInex > 0) {
                spacingInex--;
                this.scrollTop(nowTop += everTop);
            } else {
                clearInterval(scrollTimer); // 清除计时器
            }
        }, spacingTime);
      }
    }
  }
</script>
<style lang="scss" scoped>
  .static-bottom {
    width: 5rem;
    height: 5rem;
    position: fixed;
    right: 8rem;
    bottom: 5rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity .5s;
    &:hover {
      animation: rubberBand 1s;
    }
  }
  .opacity {
    opacity: 1;
  }
  .huojian {
    animation: huojian 1s infinite linear;
  }
  @keyframes rubberBand {
    from {
      transform: scale3d(1, 1, 1);
    }

    30% {
      transform: scale3d(1.25, 0.75, 1);
    }

    40% {
      transform: scale3d(0.75, 1.25, 1);
    }

    50% {
      transform: scale3d(1.15, 0.85, 1);
    }

    65% {
      transform: scale3d(.95, 1.05, 1);
    }

    75% {
      transform: scale3d(1.05, .95, 1);
    }

    to {
      transform: scale3d(1, 1, 1);
    }
  }
</style>
